<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/mock/public.css">
<link rel="stylesheet" href="/cn/css/public/jquery.contextMenu.min.css">
<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/element-ui/index.css">
<script src="https://file.viplgw.cn/ui/public/js/jquery-3.2.1.min.js"></script>
<script src="/cn/js/menu.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/jquery.ui.position.min.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/jquery.contextMenu.min.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/rangy-core.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/rangy-classapplier.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/rangy-highlighter.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/rangy-textrange.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/notes.js"></script>
<script src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>
<script src="https://file.viplgw.cn/ui/thinku-ielts-new/element-ui/index.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/jquery.cookie.js"></script>


<div class="tipsCover" id="tipsCover">
    <!--暂停-->
    <div class="tipsPause tipsCommon">
        <p class="tipsTitle">Pause</p>
        <p class="tipsDes">
            The timer has paused. Click the button below to continue to answer the question. This fuction is not
            available in the real computer-delivered IELTS test.
        </p>
        <p class="continueBtn" onclick="Continue()">Continue</p>
    </div>
    <!--帮助-->
    <div class="tipsHelp tipsCommon">
        <p class="tipsTitle">Help</p>
        <div CLASS="helpNav">
            <a href="javascript:;" class="on" onclick="helpChange(this)">Information</a>
            <a href="javascript:;" class="" onclick="helpChange(this)">Test help</a>
            <a href="javascript:;" class="" onclick="helpChange(this)">Task help</a>
        </div>
        <div class="helpContentBox" style="display: block">
            <p class="contentTitle">INSTRUCTIONS TO CANDIDATES</p>
            <span class="contentDes">
                · Answer all the questions. <br>
                · You can change your answers at any time during the test.
            </span>
            <p class="contentTitle">INFORMATION FOR CANDIDATES</p>
            <span class="contentDes">
                · There are 40 questions in this test.<br>
                · Each question carries one mark.<br>
                · There are four parts to the test.<br>
                · You will hear each part once.<br>
                · For each part of the test there will be time for you to look through the questions and time for you to check your answers.
            </span>
        </div>
        <div class="helpContentBox">
            <p class="strip">At the top of the sc</p>
            <img style="width: 156px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/1@2x.png" alt="">
            <p class="strip">Your name and candid</p>
            <img style="width: 206px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/2@2x.png" alt="">
            <p class="strip">A clock, which tells you how much time you have left. When you hover over the time you can
                see the seconds.</p>
            <div class="rowStrip">
                <img style="width: 79px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/3@2x.png" alt="">
                <p>Click to view the he</p>
            </div>
            <div class="rowStrip">
                <img style="width: 79px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/4@2x.png" alt="">
                <p>Click to hide the screen content temporarily.</p>
            </div>
            <p class="strip">Volume</p>
            <p class="strip">If you want to change the volume of the Listening test, click on the volume slider.</p>
            <img style="width: 251px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/5@2x.png" alt="">
            <p class="strip">Navigation</p>
            <p class="strip">At the bottom of the screen you can see the navigation bar.</p>
            <img style="width: 90%" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/6@2x.png" alt="">
            <p class="strip">Click on a number to go to that question.</p>
            <div class="rowStrip">
                <img style="width: 46px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/20@2x(1).png" alt="">
                <p>Click to go to the n</p>
            </div>
            <div class="rowStrip">
                <img style="width: 46px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/21@2x(1).png" alt="">
                <p>Click to go to the n</p>
            </div>
            <div class="rowStrip">
                <img style="width: 76px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/22@2x.png" alt="">
                <p>Click if you want to look at this question again later. The question number in the navigation bar
                    will turn into a circle.</p>
            </div>
            <div class="rowStrip">
                <img style="width: 30px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/10@2x.png" alt="">
                <p>The blue highlighting shows the question you are looking at.</p>
            </div>
            <div class="rowStrip">
                <img style="width: 30px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/11@2x.png" alt="">
                <p>The underlining shows that you have answered this question.</p>
            </div>
            <div class="rowStrip">
                <img style="width: 30px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/12@2x.png" alt="">
                <p>The circle shows that you want to look at this question again (marked for review).</p>
            </div>
            <div class="rowStrip">
                <img style="width: 30px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/13@2x.png" alt="">
                <p>The black highlighting shows that you have not answered the question.</p>
            </div>
            <p class="strip">Highlighting</p>
            <p class="stripSpan">To highlight something in the test:</p>
            <p class="strip">Select the text you want to highlight using the mouse. <br> Right click over the text.</p>
            <img style="width: 298px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/14@2x.png" alt="">
            <div class="rowStrip">
                <img style="width: 115px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/15@2x.png" alt="">
                <p>Click to highlight the text you have selected.</p>
            </div>
            <div class="rowStrip">
                <img style="width: 115px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/16@2x.png" alt="">
                <p>The black highlighting shows that you have not answered the question.</p>
            </div>
            <p class="strip">Notes</p>
            <p class="stripSpan">To close the notes click on X in the top right. To view the notes right-click on the
                highlighted text (anything you write in Notes will be deleted at the end of the test).</p>
            <img style="width: 306px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/17@2x.png" alt="">
            <p class="stripSpan">You can locate those areas of highlighted text containing notes by hovering over each
                highlighted text. If a small orange box appears the highlighted text contains notes.</p>
            <img style="width: 306px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/18@2x.png" alt="">
            <p class="stripSpan">To clear your highlighting right click on the highlighted text.</p>
            <img style="width: 348px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/19@2x.png" alt="">
            <div class="rowStrip">
                <img style="width: 115px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/20@2x.png" alt="">
                <p>Click to clear the highlighting. This will also clear any notes you have made.</p>
            </div>
            <div class="rowStrip">
                <img style="width: 115px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/21@2x.png" alt="">
                <p>Click to clear all highlighting including notes.</p>
            </div>
        </div>
        <div class="helpContentBox">
            <p class="strip">To choose a question either click on the question number at the bottom of the screen or
                click on the question.</p>
            <p class="strip">Multiple choice questions in an accordio</p>
            <p class="stripSpan">Choose your question by clicking on it.</p>
            <img style="width: 600px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 1@2x.png" alt="">
            <p class="stripSpan">Click on the answer you think is right.</p>
            <p class="stripSpan">If you change your mind, click on a different answer. <br> If you want to leave the
                question unanswered, click on your answer again.</p>
            <p class="strip">Multiple choice questions where there is more than one answer</p>
            <p class="strip">Some questions may ask you to choose two or three answers. Make sure you read the
                instructions and questions carefully.</p>
            <img style="width: 600px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 2@2x.png" alt="">
            <p class="stripSpan">Click on the answers you think are right.</p>
            <p class="stripSpan">If you change your mind, click on a different answer. <br> If you want to leave the
                question unanswered, click on your answer again.</p>
            <p class="strip">Gap fill questions</p>
            <p class="stripSpan">To answer some questions, you need to write words or numbers in a gap. To answer these
                questions, click in the gap and<br> write your answer. Some questions may ask you to write your answer
                in a table, flow-chart or diagram.</p>
            <img style="width: 600px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 3@2x.png" alt="">
            <p class="strip">Matching questions u</p>
            <p class="stripSpan">To select a question, click on the question number in the table. The column will become
                shaded.</p>
            <img style="width: 600px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 4@2x.png" alt="">
            <p class="stripSpan">Select the correct option by clicking on a space in the table. A tick will appear.</p>
            <img style="width: 600px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 5@2x.png" alt="">
            <p class="stripSpan">If you want to change your answer, click on another space. <br> If you want to leave
                the question unanswered, click on the space again.</p>
            <p class="strip">Drag and drop questi</p>
            <p class="stripSpan">To select a question, click on the question number in the table. The column will become
                shaded.</p>
            <img style="width: 715px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 6@2x.png" alt="">
            <p class="stripSpan">To answer a question, click on the answer and move it into the gap.</p>
            <img style="width: 715px" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/tips/task 7@2x.png" alt="">
            <p class="stripSpan">If you want to change your answer, move another answer into the gap. <br> If you want
                to leave the question unanswered, move the answer back.<br> Don't forget! You may need to scroll to see
                all the Reading text and all the questions.</p>
        </div>
        <div class="okBtn" onclick="closeHelp()">OK</div>
    </div>
    <!--Finish Section-->
    <div class="tipsSection tipsCommon">
        <p class="tipsTitle">Finish section</p>
        <p class="tipsDes">
            Once you leave this section and proceed to the next, you WILL NOT be able to return to it. <br> ARE YOU SURE
            you wish to submit this section?<br> Click on Cancel to continue working.<br> Click on OK if you are sure
            you want to submit this section and proceed to the next.<br> This fuction is not available in the real
            computer-delivered IELTS test.</p>
        <p class="finishBox">
            <a href="javascript:;" onclick="submitTest()" class="submitTest">OK</a>
            <a href="javascript:;" onclick="closeHelp()" class="Cancle">Cancle</a>
        </p>
    </div>
    <div class="tipsTest tipsCommon">
        <p class="tipsTitle">Finish Test</p>
        <p class="tipsDes">
            You have selected to end the familiarisation test , click OK to exit the test <br> or Cancel to return to
            the Writing section.
            <br><br>This function is not available in the real computer-delivered IELTS test.</p>
        <p class="finishBox">
            <a href="javascript:;" onclick="submitTest()" class="submitTest">OK</a>
            <a href="javascript:;" onclick="closeHelp()" class="Cancle">Cancle</a>
        </p>
    </div>
    <!--Finish end-->
    <div class="tipsEnd tipsCommon">
        <p class="tipsTitle">Test ended</p>
        <p class="tipsDes">
            Your test has finished <br> All of your answers have been stored <br> Please wait for further instructions
        <p class="finishBox">
            <a href="javascript:;" onclick="listenResult()" class="continueBtn">Continue</a>
        </p>
    </div>
</div>
<div class="hiddenCover">
    <div class="hiddenCenter">
        <p class="hiddenTitle">Screen hidden</p>
        <div class="hiddenDes">
            Your answers have been stored. <br> Please note thatthe clock is still running. The time has not been
            paused.
            <br> f you wish to leave the room, please tell your invigilator. <br>
            Click the button bellow to go back to your test.
        </div>
        <div class="resume" onclick="closeHidden()">Resume test</div>
    </div>
</div>
<script>
    function helpChange(obj) {
        const index = $(obj).index()
        $('.helpNav>a').removeClass('on')
        $(obj).addClass('on')
        $('.helpContentBox').hide();
        $('.helpContentBox').eq(index).show()
    }

    function submitTest() {
        window.listenTest ? window.listenTest.submitText() : ''
        window.readTest ? window.readTest.submitText() : ''
        window.writeTest ? window.writeTest.submitText() : ''
    }

    function Continue() {
        window.listenTest && window.listenTest.isStart ? window.listenTest.timeDown() : ''
        window.readTest && window.readTest.isStart ? window.readTest.timeDown() : ''
        window.writeTest && window.writeTest.isStart ? window.writeTest.timeDown() : ''
        $('.tipsCover').hide()
    }

    function listenResult(){
        window.listenTest ? window.listenTest.nextSection() : ''
        window.readTest ? window.readTest.nextSection() : ''
        window.writeTest ? window.writeTest.nextSection() : ''
    }

    function closeHelp() {
        $('.tipsCover').hide()
    }

    function closeHidden() {
        $('.hiddenCover').hide()
    }
</script>
